<template>
  <v-layout :title="title+'导入'" >
    <!--<upload-excel-component :on-success="handleSuccess" :before-upload="beforeUpload"/>-->
    <!--<el-table :data="tableData" border highlight-current-row style="width: 100%;margin-top:20px;">-->
    <!--<el-table-column v-for="item of tableHeader" :prop="item" :label="item" :key="item"/>-->
    <!--</el-table>-->
    <el-row type="flex" justify="center">
      <el-col :lg="14" :md="14" :sm="20" :xs="24">
        <el-upload
          ref="upload"
          accept="application/vnd.ms-excel"
          :action="uploadUrl"
          :with-credentials="true"
          :headers="headers"
          :auto-upload="false"
          :on-change="handleChange"
          :on-success="handleUploaded"
          :on-error="handleError"
          :on-preview="handlePreview"
          class="upload-demo"
          multiple>
          <el-button size="small" type="primary">浏览文件</el-button>
          <div slot="tip" class="el-upload__tip">
            <div class="h3 lh14">说明：</div>
            <p class="lh14">先下载好模板，模板中id为0，表示为新增，否则则为修改，提交前请认真检查数据是否有错误,单次最多两百条</p>
            <p class="lh14 ">点击进行模板下载，编辑好后上传excel文件进行导入</p>

          </div>
        </el-upload>
        <el-row type="flex" justify="end" class="pdt15">
          <el-button type="primary" size="small" @click="reset">撤销</el-button>
          <el-button type="primary" size="small" @click="upload">确认上传</el-button>
        </el-row>
      </el-col>
    </el-row>

    <!--查看pdf-->
    <el-dialog
      :visible.sync="showModel"
      width="30%"
    >
      <iframe :src="previewUrl" style="width:100%;min-height:60vh" frameborder="0"/>
    </el-dialog>
  </v-layout>
</template>

<script>
import UploadExcelComponent from '@/components/UploadExcel/index.vue'
import { getToken } from '@/utils/auth'
import axios from 'axios'

export default {
  name: 'UploadExcel',
  components: { UploadExcelComponent },
  data() {
    return {
      title: '广告订单',
      showModel: false,
      previewUrl: '',
      tableData: [],
      tableHeader: [],
      file: null,
      uploadUrl: '',
      headers: {
        // 'Content-Type': 'multipart/form-data'
      },
      $axios: null
    }
  },
  activated() {
    this.uploadUrl = this.$route.query.action
    // this.initAxios();
    this.title = this.$route.query.title
  },

  methods: {
    // initAxios() {
    //     this.$axios = axios.create({
    //         withCredentials: true
    //     })
    // },
    handleUpload(content) {
      const formData = new FormData()
      formData.append('file', content.file)
      console.log(formData)
      const data = content.file
      this.$axios({
        url: content.action,
        method: 'post',
        headers: content.headers,
        formData
      }).then(res => {

      })
    },
    handlePreview(file) {
      return false
      this.previewUrl = file.url
      this.showModel = true
    },
    handleChange(file, fileList) {
      console.log(file, fileList);
      if (!/\.xls$/.test(file.name)) {
        this.$message({
            message:'请上传 ".xls" 格式的文件',
            type:'error'
        })
        this.$refs.upload.clearFiles()
        return false
      }

    },
    handleUploaded(res, file, fileList) {
      console.log(res, file, fileList, 'res')
      if (res.status === 200) {
        this.$message({
          message: res.msg,
          type: 'success'
        })
        setTimeout(()=>{this.$router.go(-1)},0)
      } else if (res.status === 300) {
        this.$store.dispatch('LogOut').then(_ => {
          location.reload()
        }).then(_ => {
          console.log('sadflksjdlf')
          this.$message({
            message: res.msg || '上传失败',
            type: 'error'
          })
        })
      }else{
        fileList.pop();
        this.$message({
          message: res.msg || '上传失败',
          type: 'error'
        })
      }
    },
    handleError(err, file, fileList) {
      console.log(err, file, fileList)
      this.$message({
        message: err.msg || '未知错误,上传失败',
        type: 'error',
        duration: 5000
      })
    },

    reset() {
      this.$refs.upload.clearFiles()
    },
    upload() {
      this.$refs.upload.submit()
    }
    // beforeUpload(file) {
    //     this.file = file;
    //     const isLt1M = file.size / 1024 / 1024 < 1;
    //     console.log(this.file);
    //     if (isLt1M) {
    //         return true
    //     }
    //     this.$message({
    //         message: 'Please do not upload files larger than 1m in size.',
    //         type: 'warning'
    //     })
    //     return false
    // },
    // handleSuccess({results, header}) {
    //     this.tableData = results.filter((item, index) => {
    //         return index < 3
    //     })
    //     this.tableHeader = header
    // }
  }
}
</script>

